
import React, { useEffect } from 'react';
import './email.css';
import { NavBar, Toast } from 'react-vant';
import { useNavigate, useLocation } from 'react-router-dom';

const Email: React.FC = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const email = location.state?.email || 'example@example.com';
    useEffect(()=>{
        if(location.state?.code === 200  ){
            Toast.success({
                message:'验证码已发送至您的邮箱，请注意查收,3秒后自动跳转到设置新密码页面',
                duration: 3000
            });
            setTimeout(() => {
                // 这里可以根据你的需求修改跳转逻辑
                navigate('/newPassword',{
                    state:{email:email}
                }
                );
            }, 3000);
        }else{
            Toast.fail({
                message:'验证码发送失败，请检查您的邮箱地址是否正确'
            });
        }
    },[])
    return (
        <div className="email-container">
            {/* <button className="back-button">返回</button> */}
            <NavBar
                title="检查你的电子邮件"
                leftText=""
                onClickLeft={() => {navigate('/register')}}
            />
            <div className="email-box-image">

                <div className="email-box">
                    <img src="/public/images/6.png" className="email-image" />

                </div>
                <span className="email-span">
                    如果您有我们的账户,我们会通过<br/>{email}与您联系帮助您设置新的密码
                </span>
            </div>
            <button className="resend-button">重新发送</button>
            <button className="login-button" onClick={()=>{navigate('/login')}}>回到登录</button>
        </div>
    );
}

export default Email;